<template>
  <view class="bx-detail">
    <view class="main-pd">
      <view class="qus-block">
        <view class="color-595959 font-28 u-m-b-16">小区名称</view>
        <view class="color-333 font-32">{{ scMsg.xqName || "" }}</view>
      </view>
      <view class="qus-block  u-m-t-20">
        <view class="color-595959 font-28 u-m-b-16">申请书内容</view>
        <view class="color-333 font-32">{{ scMsg.content || "" }}</view>
      </view>
      <view class="qus-block  u-m-t-20">
        <view class="color-595959 font-28 u-m-b-16">业主签字文件</view>
        <view>
          <cl-upload
            v-model="signList"
            :add="false"
            :remove="false"></cl-upload>
        </view>
      </view>
      <view class="qus-block  u-m-t-20">
        <view class="color-595959 font-28 u-m-b-16">其他相关文件</view>
        <view>
          <cl-upload
            v-model="otherList"
            :add="false"
            :remove="false"></cl-upload>
        </view>
      </view>
      <!-- 底部信息 -->
      <view class="cell-msg">
        <view class="cell-item">
          <view>申请时间</view>
          <view>{{ scMsg.applyTime || "" }}</view>
        </view>
        <view class="cell-item">
          <view>申请人</view>
          <view>{{ scMsg.applyUser }}</view>
        </view>
        <view class="cell-item">
          <view>联系方式</view>
          <view>{{ scMsg.phone || "" }}</view>
        </view>
        <view class="cell-item">
          <view>审查状态</view>
          <view>{{ scStatus(scMsg.state) }}</view>
        </view>
        <view class="cell-item row-item" v-if="scMsg.state == 2">
          <view>不通过原因</view>
          <view class="u-m-t-16">{{scMsg.reason || '' }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { getywhInfoApi } from "@/api/index";
import { onLoad } from "@dcloudio/uni-app";
let scMsg = ref({});
let signList = ref([]);
let otherList = ref([]);
const scStatus = computed((status) => {
  return function (status) {
    let statusArr = ["待审查", "审查通过", "审查不通过"];
    return statusArr[status];
  };
});
const getywhInfoHandle = (id) => {
  getywhInfoApi({
    id,
  }).then((res) => {
    if (res.success) {
      scMsg.value = res.data;
      signList.value =  res.data.qzfile?res.data.qzfile.split(","):[];
      otherList.value =  res.data.otherfile?res.data.otherfile.split(","):[];
    }
  });
};
onLoad((param) => {
  getywhInfoHandle(param.id);
});
</script>

<style lang="scss" scoped>
.bx-detail {
  padding-top: 20rpx;
  padding-bottom: 80rpx;

  .qus-block {
    background-color: #fff;
    border-radius: 12rpx; 
    padding: 32rpx;
    box-sizing: border-box;
  }


  .pic-item {
    margin-right: 16rpx;
    margin-bottom: 16rpx;

    &:nth-child(4n) {
      margin-right: 0;
    }
  }

  .cell-msg {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    margin-top: 20rpx;

    .cell-item {
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      justify-content: space-between;
      padding: 30rpx;
      font-size: 32rpx;
      color: #595959;

      &:last-child {
        border: none;
      }
    }

    .row-item {
      flex-direction: column;
      justify-content: start;
    }
  }
}
</style>
